<template>
  <div class="new" @scroll="handleScroll">
    <HmItem
      v-for="(item, index) in list"
      :key="item.id"
      :item="list[index]"
    ></HmItem>
  </div>
</template>

<script>
import axios from "axios";
import HmItem from "@/components/HmItem.vue";
export default {
  name: "HmArticle",
  data() {
    return {
      loading: false,
      list: [],
      current: 1,
      pageSize: 10,
      token: localStorage.getItem("token"),
    };
  },
  components: {
    HmItem,
  },
  created() {
    this.getList();
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      const windowHeight = window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;

      if (scrollTop + windowHeight >= documentHeight - 10) {
        this.current += 1;
        this.getList();
      }
    },
    async getList() {
      if (this.loading) return;
      this.loading = true;

      const res = await axios.get(
        // /h5/interview/query
        "http://interview-api-t.itheima.net/h5/interview/query",
        {
          params: {
            current: this.current,
            pageSize: this.pageSize,
            sorter: "weight_desc",
          },
          headers: {
            Authorization: `Bearer ${this.token}`,
          },
        }
      );
      console.log(res);
      this.list = this.list.concat(res.data.data.rows);
      this.loading = false;
    },
  },
};
</script>

<style lang="less" scoped>
.new {
  padding: 10px;
}
</style>
